<template>
   <div>
     <el-dialog
         title="搜索"
         :visible.sync="searchShow"
         width="25%"
     >
       <el-form label-width="80px" >
         <el-form-item label="供应商名">
           <el-input v-model="searchName"   size="small" ></el-input>
         </el-form-item>
         <el-form-item label="经营范围">
           <el-input  v-model="searchRange"  size="small"></el-input>
         </el-form-item>
       </el-form>
       <el-button icon="el-icon-search" style="margin-left: 69%" @click="search">搜索</el-button>
     </el-dialog>
     <el-dialog
         title="添加供应商信息"
         :visible.sync="addShow"
         width="25%"
     >
       <el-form label-width="100px" >
         <el-form-item label="供应商名称">
           <el-input v-model="addName" size="small" ></el-input>
         </el-form-item>
         <el-form-item label="负责人">
           <el-input  v-model="addManager" size="small"></el-input>
         </el-form-item>
         <el-form-item label="负责人电话">
           <el-input v-model="addPhone" size="small"></el-input>
         </el-form-item>
         <el-form-item label="供应商地址">
           <el-input v-model="addAddress" size="small"></el-input>
         </el-form-item>
         <el-form-item label="经营范围">
           <el-input type="textarea" v-model="addRange"  size="50"></el-input>
         </el-form-item>
       </el-form>
       <el-button type="primary" icon="el-icon-edit" style="margin-left: 50%" @click="addSupplier">添加</el-button>
     </el-dialog>

     <el-dialog
         title="修改供应商信息"
         :visible.sync="updateShow"
         width="25%"
     >
       <el-form label-width="100px" >
         <el-form-item label="供应商名称">
           <el-input v-model="suppliersName" size="small" disabled ></el-input>
         </el-form-item>
         <el-form-item label="负责人">
           <el-input  v-model="supplierManager" :value="supplierManager" size="small"></el-input>
         </el-form-item>
         <el-form-item label="负责人电话">
           <el-input v-model="supplierPhone" :value="supplierManager" size="small" ></el-input>
         </el-form-item>
         <el-form-item label="供应商地址">
           <el-input v-model="supplierAddress" size="small" disabled></el-input>
         </el-form-item>
         <el-form-item label="经营范围">
           <el-input type="textarea" v-model="supplierRange"  size="small" disabled></el-input>
         </el-form-item>
       </el-form>
       <el-button type="primary" icon="el-icon-edit" style="margin-left: 50%" @click="update(supplierManager,supplierPhone)">修改</el-button>
     </el-dialog>

     <el-dialog
         title="供应商信息"
         :visible.sync="findShow"
         width="25%"
     >
       <el-form label-width="100px" >
         <el-form-item label="供应商名称">
           <el-input v-model="suppliersName" size="small" disabled  ></el-input>
         </el-form-item>
         <el-form-item label="负责人">
           <el-input  v-model="supplierManager" size="small" disabled></el-input>
         </el-form-item>
         <el-form-item label="负责人电话">
           <el-input v-model="supplierPhone" size="small" disabled ></el-input>
         </el-form-item>
         <el-form-item label="供应商地址">
           <el-input v-model="supplierAddress" size="small"  disabled></el-input>
         </el-form-item>
         <el-form-item label="经营范围">
           <el-input type="textarea" v-model="supplierRange"  size="small" disabled ></el-input>
         </el-form-item>
       </el-form>
     </el-dialog>

     <el-row>
           <el-col :span="24">
             <div class="grid-content bg-purple-dark">
             <h3>供应商管理</h3>
               <el-button type="primary" icon="el-icon-search" size="medium " @click="searchWind">搜索</el-button>
               <el-button type="primary" icon="el-icon-plus" size="medium " @click="addWind">添加</el-button>
               <el-button type="primary" icon="el-icon-search" size="medium " @click="showWind">查看</el-button>
               <el-button type="primary" icon="el-icon-edit" size="medium " @click="updateWind">修改</el-button>
           </div></el-col>
       </el-row>
       <el-row>
           <el-col :span="24"><div class="grid-content bg-purple-dark">
               <el-table
                       :data="tableData"
                       highlight-current-row
                       @current-change="handleCurrentChange"
                       style="width: 100%">
                   <el-table-column
                           prop="suppliersName"
                           label="供应商名称"
                           align="center"
                           >
                   </el-table-column>
                   <el-table-column
                           prop="supplierManager"
                           label="负责人"
                           align="center"
                           >
                   </el-table-column>
                   <el-table-column
                           prop="supplierRange"
                           label="经营范围"
                           align="center">
                   </el-table-column>
               </el-table>
           </div>
           </el-col>
       </el-row>
       <el-row>
           <el-col :span="24"><div class="grid-content bg-purple-dark">
               <div class="block">
                   <el-pagination
                           background
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total"
                           :page-size="pageSize"
                           @size-change="handleSizeChange"
                           :page-sizes="[5, 10]"
                           :current-page="currentPage"
                           @current-change="currentPageFn">
                   </el-pagination>
               </div>
           </div></el-col>
       </el-row>
   </div>
</template>

<script>
    export default {
        name: "Supplier",
        data(){
          return{
            total:0, //总行数
            pageSize:5,//每页显示的行数
            currentPage:1, //当前页
            tableData: [], //分页后的集合
            searchShow:false,
            updateShow:false,
            addShow:false,
            findShow:false,
            id:'',
            suppliersName:'',
            supplierPhone:'',
            supplierManager:'',
            supplierAddress:'',
            supplierRange:'',
            searchName:'',
            searchRange:'',
            addName:'',
            addManager:'',
            addPhone:'',
            addAddress:'',
            addRange:'',
            updateName:'',
            updateManager:'',
            updatePhone:'',
            updateAddress:'',
            updateRange:''
          }
        },
        mounted(){
            this.init()
        },
        methods:{
          handleCurrentChange(val){
            this.id=val.id
            this.suppliersName=val.suppliersName
            this.supplierPhone=val.supplierPhone
            this.supplierManager=val.supplierManager
            this.supplierAddress=val.supplierAddress
            this.supplierRange=val.supplierRange

          },
         async addSupplier(){
            let param = new FormData();
            param.append('suppliersName',this.addName);
            param.append('supplierManager',this.addManager);
            param.append('supplierPhone',this.addPhone);
            param.append('supplierAddress',this.addAddress);
            param.append('supplierRange',this.addRange);
            let obj ;
            await this.axios.post('/api/supplier/add',param).then(
                 r=>{
                    obj = r.data;
                 }
             );
            if(obj.code === 0){
              this.$message.success(obj.info)
              this.init()
              this.addShow=false
              this.addName=''
              this.addManager=''
              this.addPhone=''
              this.addAddress=''
              this.addRange=''
            }else {
              this.$message.error(obj.info)
            }
            //添加
          }
          ,
         async update(supplierManager,supplierPhone){
           let param = new FormData();
           param.append('id',this.id);
           param.append('suppliersName',this.suppliersName);
           param.append('supplierManager',supplierManager);
           param.append('supplierPhone',supplierPhone);
           param.append('supplierAddress',this.supplierAddress);
           param.append('supplierRange',this.supplierRange);
            let obj
            await this.$axios.put('/api/supplier/update',param).then(
              r=>{
                obj = r.data
            })
            if(obj.code === 0){
              this.$message.success(obj.info)
              this.init()
              this.updateShow=false
            }else {
              this.$message.error(obj.info)
            }
          },
          search(){
            this.init()
            this.searchShow=false //关闭弹出窗口
          },
          addWind(){
            this.addShow=true
          }
          ,
          searchWind(){
            this.searchShow=true
          },
          showWind(){
            if(this.id==''){
              this.$message.warning('请选择行')
              return
            }
            this.findShow=true
          },
          updateWind(){
            //打开添加修改弹出框
            if(this.id==''){
              this.$message.warning('请选择行')
              return
            }
            this.updateShow=true
          },
          handleSizeChange(pageSize) {
            this.pageSize = pageSize
            this.init()
          },
          currentPageFn(currentPage){
            this.currentPage=currentPage
            this.init()
          },
            init(){
                let param = {
                  pn:this.currentPage,
                  pageSize:this.pageSize,
                  name:this.searchName,
                  range:this.searchRange
                }
                this.$axios.get('/api/supplier/findByItem',{params:param}).then(
                    r=>{
                      let obj = r.data
                       this.tableData =obj.list
                      console.log(this.tableData)
                       this.total = obj.total
                    }
                )
            }
        }
    }
</script>

<style scoped>

</style>
